<template>
    <div class="logcial-room">
        <ItemDetail :loading="tableLoading" :show.sync="showModal" :value="item" :title="`${action} Item`" :id="itemID" @submit="confirmSubmit" :action="action" ></ItemDetail>
        <div class="row">
            <div class="col-md-12 p-0">
                <filter-form v-if="filters.length" :columns="filters" @submit="submit"></filter-form>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 bg-white p-0 m-0">
                <item-table isAdd @add="addItem" title="Guest Registration List" :columns="defaultColumns" :data="data" :loading="tableLoading" @sort="sort"
                            :total="total" :model="model" isColumns  isExport @export="exportExcel"
                >
                    <template slot="is_guest_representative" slot-scope="props">
                        <span class="label label-primary" v-if="props.item.is_guest_representative">YES</span>
                        <span class="label label-danger" v-else>
                            NO
                        </span>
                    </template>
                    <template slot="visa_on_arrival" slot-scope="props">
                        <span class="label label-primary" v-if="props.item.visa_on_arrival">YES</span>
                        <span class="label label-danger" v-else>
                            NO
                        </span>
                    </template>
                    <template slot="actions" slot-scope="props">
                        <button type="button" class="btn btn-info btn-outline btn-circle btn-md m-r-5" @click="editItem(props)">
                            <i class="fif fif-edit"></i>
                        </button>
                        <button type="button" class="btn btn-danger btn-outline btn-circle btn-md m-r-5" @click="deleteItem(props)">
                            <i class="fif fif-delete"></i>
                        </button>
                    </template>
                </item-table>
                <v-paginate :pageCount="pageCount" :page="page" @change="changePage"></v-paginate>
            </div>
        </div>
    </div>
</template>

<script>
    // components
    import vSelect from 'vue-select'
    import vPaginate from '@/components/widgets/Pagination'
    import ItemTable from '@/components/widgets/ItemTable'
    import ItemDetail from '@/components/widgets/ItemDetail'
    import FilterForm from '@/components/widgets/FilterForm'
    // utlis
    import {toJsonData} from '@/utils'
    // mixin
    import {lifeHookMixin, itemMixin} from '@/mixins/item'

    export default {
        name: "GuestRegistration",
        components: {vSelect, vPaginate, ItemTable, FilterForm, ItemDetail},
        mixins: [lifeHookMixin, itemMixin],
        methods: {
            genSrc(obj) {
                obj = JSON.parse(obj)
                return obj.url
            }
        },
    }
</script>

<style scoped>

</style>